Add DnD for mobile #699
Add DnD for mobile #699
Conversation
luckylionheart
changed the title
|
fixes #456 |
|
@blokhin |
|
@luckylionheart what is |
|
@blokhin |
|
@luckylionheart ready now? |
|
|
|
@blokhin did you check the live server? |
|
@blokhin I add the new commit. Please kindly check it. |
|
OK, now it works in iOS 🎉 |
drag/drag.view.ts
Outdated
| private dragged_task: HTMLElement | null = null; | ||
| private initial_task_index: number | null = null; | ||
| private draggedOverElem: HTMLElement | null = null; |
There was a problem hiding this comment.
There should be no info about the dragged element, this is the work for $mol_drop. The new position of the passed element must be determined by $mol_drop. $mol_drag don't move element before drop.
If we want a component that immediately changes the position of elements when the pointer is moved, it will be a different component, not $mol_drag.
drag/drag.view.ts
Outdated
| ); | ||
|
|
||
| if (draggedOverIndex !== this.initial_task_index) { | ||
| parent!.insertBefore(this.dragged_task!, draggedOverElem); |
There was a problem hiding this comment.
We don't make any direct changes to the DOM. Instead, we set values for props and the components render the DOM.
drag/drag.view.ts
Outdated
|
|
||
| this.dragImageElem.style.position = "absolute"; | ||
| this.dragImageElem.style.pointerEvents = "none"; | ||
| this.dragImageElem.style.zIndex = "9999"; |
There was a problem hiding this comment.
dragImageElem should be located in drag.view.tree.
Static styles of it in drag.view.css.ts, dynamic styles in view.tree style *
Name should be in snake_case.
Also I suggest not to clone the dragged element, it may be large and this may cause glitches since the cloned elements will have the same ids.
Instead I suggest making Drag_label $mol_paragraph which will just be the title of the dragged element
drag/drag.view.ts
Outdated
| moveDragImage(x: number, y: number) { | ||
| if (this.dragImageElem) { | ||
| this.dragImageElem.style.left = `${x + 50}px`; | ||
| this.dragImageElem.style.top = `${y + 50}px`; |
There was a problem hiding this comment.
-50, -50 would be better, I can't see the object under my finger :)
drag/drag.view.ts
Outdated
| if (this.draggedOverElem) { | ||
| if ( | ||
| this.draggedOverElem.id == | ||
| "$hyoo_mol.Root(0).Demos().Widget('$mol_drag_demo').Trash()" |
There was a problem hiding this comment.
This will only work for $hyoo_mol.Root(0).Demos().Widget('$mol_drag_demo').Trash().
Anyway, this should be handled in $mol_drop, not $mol_drag.
|
@stan-donarise thanks so much for your feedback. I will fix it according to your comment. Thanks |
|
@blokhin |
|
OK, I confirm it works now once again. Although a previous version demonstrated a smoother and intuitively easier drag and drop on iOS. Unlike now, one did not have to press hard on draggable, and even a scroll-alike touching worked flawlessly. |
|
@luckylionheart but I cannot see any changes in |
|
@blokhin yes, because, we used drag event. drag event is already defined. but need to some change for mobile dnd. |
luckylionheart
changed the title
No description provided.